<template>
	<!-- 频道视频分类的头部 -->
	<div class="refresh flex-center" @click="$emit('refresh')" @mouseenter="inner">
		<span class="icon" ref="refresh"><Icon type="refresh"/></span>
		<span class="refresh-btn">换一换</span>
	</div>
</template>

<script>
export default{
	name: 'Refresh',
	data(){
		return{
			// 刷新防抖
			flag: false,
			// 控制刷新只能一个方向
			num: 1
		}
	},
	methods:{
		// 移入时刷新按钮转动
		inner(){
			if(this.flag) return;
			this.flag = true;
			this.$refs.refresh.style.transform = 'rotate(-'+(this.num*360-80)+'deg)';
			this.num++
			setTimeout(() => {
				this.flag = false
			},1220)
		},
	}
}
</script>

<style scoped lang="less">
.refresh{
	margin-top: 11px;
	padding: 0 8px;
	height: 24px;
	border: 1px solid silver;
	box-sizing: border-box;
	border-radius: 2px;
	color: #505050;
	cursor: pointer;
	user-select: none;
	.icon{
		display: inline-block;
		height: 100%;
		transform: rotate(80deg);
		transition: 1.2s;
		font-size: 16px;
	}
	.refresh-btn{
		margin-left: 4px;
		line-height: 100%;
		font-size: 12px;
	}
}
</style>
